<template>
  <view class="user_info_container">
    <IFexLeftRight>
      <template #left>
        <image class="user_info_image" src="https://wap.jiuyulingjing.com.cn/static/missing-face.png"></image>
      </template>
      <view>
        <view class="user_name">
          <IFexLeftRight>
            <template #right><uni-icons type="gear" size="30" /></template>
            <view class="ellipsis">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试11111111111</view>
          </IFexLeftRight>
        </view>
        <view class="user_info_oper">
          <text class="user_oper_row" v-for="(item, index) in userOperBtnList" :key="index" @click="item.callback">{{ item.label }}</text>
        </view>
      </view>
    </IFexLeftRight>
    <view class="oper_model">
      <IRowCol :rowDataList="rowDataList">
        <template #default="{ row }">
          <view class="mode_row">
            <uni-icons :type="row.data.icon" size="36" />
            <view class="oper_text">{{ row.data.label }}</view>
          </view>
        </template>
      </IRowCol>
    </view>
  </view>
</template>

<script setup lang="ts" name="userInfo">
import { ref } from 'vue';
import IRowCol from '@/components/container/IRowCol.vue';
import IFexLeftRight from '@/components/container/IFexLeftRight.vue';
import { IColTemplate } from '#/container/IRowColInterface';
// import { getLocationPosition } from '@/utils/loactionPosition';
// onMounted(async () => {
//   // const result: any = await getLocationPosition();
// });
const rowDataList = ref<IColTemplate<any>[]>([
  { data: { label: '测试', icon: 'star-filled' } },
  { data: { label: '测试', icon: 'shop-filled' } },
  { data: { label: '测试', icon: 'gift-filled' } },
  { data: { label: '测试', icon: 'color-filled' } }
]);
const userOperBtnList = ref([
  { label: '编辑资料', callback: () => {} },
  { label: '编辑资料', callback: () => {} },
  { label: '编辑资料', callback: () => {} },
  { label: '编辑资料', callback: () => {} }
]);
</script>

<style scoped lang="scss">
.user_info_container {
  background: red;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  padding: 20rpx 20rpx 70rpx 20rpx;
  .user_info_image {
    width: 90rpx;
    height: 90rpx;
    margin-right: 40rpx;
  }
  .user_info_oper,
  .user_name {
    line-height: 44rpx;
    height: 44rpx;
  }
  .user_name {
    font-size: 32rpx;
    font-weight: 600;
  }
  .user_info_oper {
    .user_oper_row {
      border-radius: 20rpx;
      background: rgba(255, 255, 255, 0.5);
      text-align: center;
      margin-right: 10rpx;
      padding: 5rpx 10rpx;
      font-size: 24rpx;
    }
  }
  .oper_model {
    margin-top: 40rpx;
    .mode_row {
      text-align: center;
    }
    .oper_text {
      font-size: 28rpx;
    }
  }
}
</style>
